import React, {
  Component,
  PropTypes,
} from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import ChartView from 'react-native-highcharts';
import PxToDp from '../../utils/PxToDp';
import Base from '../../utils/Base';

const { width } = Base.window;

const style = StyleSheet.create({
  container: {
    height: PxToDp(196),
    width,
  },
  chartbox: {
    height: PxToDp(196),
    width,
  },
});

class TrendHighchart extends Component {
  static propTypes = {
    dataTrend: PropTypes.array,
  }

  render() {
    const dataTrend = this.props.dataTrend;
    let date = [];
    let totalList = [0, 0, 0, 0, 0, 0, 0];
    let appList = [];
    let vrList = [];
    let ledList = [];
    let h5List = [];
    let webList = [];
    let driveList = [];
    let newDate = [];
    if (dataTrend && dataTrend.length > 0) {
      date = dataTrend[0].date;
      if (date.length > 7) {
        newDate = date.slice(-7);
      } else {
        newDate = date;
      }
      if (dataTrend && dataTrend.length > 1) {
        appList = dataTrend[1].app_list;
        vrList = dataTrend[2].vr_list;
        ledList = dataTrend[3].led_list;
        h5List = dataTrend[4].h5_list;
        webList = dataTrend[5].web_list;
        driveList = dataTrend[6].drive_list;
        totalList = dataTrend[7].total_list;
        if (dataTrend[0].date && dataTrend[0].date.length > 7) {
          appList = appList.slice(-7);
          vrList = vrList.slice(-7);
          ledList = ledList.slice(-7);
          h5List = h5List.slice(-7);
          webList = webList.slice(-7);
          driveList = driveList.slice(-7);
          totalList = totalList.slice(-7);
        }
      }
    }
    const Highcharts = {
      chart: {
        type: 'spline',
      },
      exporting: {  // 打印图标
        enabled: false,
      },
      title: {
        text: null,
      },
      credits: { // 版权信息
        enabled: false,
      },
      plotOptions: {
        marker: {
          symbol: 'circle',
        },
      },
      xAxis: {
        tickWidth: 0,
        categories: newDate,
      },
      yAxis: {
        title: {
          text: '',
        },
        tickPositions: [0, 100, 200, 300, 400],
        gridLineWidth: 0,
      },
      series: [
        {
          name: '全部',
          data: totalList,
          color: '#458fff',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
        {
          name: '移动数字经销店',
          data: appList,
          color: '#0cf1d9',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
        {
          name: 'AR数字展厅',
          data: vrList,
          color: '#f16d0c',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
        {
          name: '触控可视化',
          data: ledList,
          color: '#2ac7ff',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
        {
          name: '微车商',
          data: h5List,
          color: '#4be789',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
        {
          name: '官网',
          data: webList,
          color: '#535356',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
        {
          name: '虚拟驾驶模拟',
          data: driveList,
          color: '#f1c10c',
          diamond: 'circle',
          marker: {
            symbol: 'cicle',
          },
        },
      ],
      legend: {
        enabled: false,
      },
    };
    return (
      <View style={style.container}>
        <ChartView style={style.chartbox} config={Highcharts} />
      </View>
    );
  }
}

export default TrendHighchart;
